<template>
  <el-dialog title="案例评分" :close-on-click-modal="false" :destroy-on-close="true" width="1000px" :visible.sync="isShow" :before-close="closeBox">
    <div class="online-diglogBox">
      <div class="comment-left">
        <div class="case-tip">案例要求</div>
        <div class="case-con">{{cases.caserequest}}</div>
        <div class="case-tip">案例背景</div>
        <div class="case-con">{{cases.resourceCaseAnswerAnaylse}}</div>
      </div>
      <div class="comment-right">
        <div class="comment-state">{{cases.isScored === '1' ? '已评分' : '未评分'}}</div>
        <div class="case-answer">{{cases.result}}</div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" style="padding: 0 10px;">
          <el-form-item prop="lessonProject" label="报告文件">
            <el-button type="primary" size="mini">查看</el-button>
          </el-form-item>
          <el-form-item prop="score" label="进行评分">
            <el-input-number v-model="ruleForm.score" autocomplete="off" :min="0" style="width: 200px;"></el-input-number>
          </el-form-item>
          <el-form-item prop="isExcellented" label="设为优秀案例">
            <el-radio-group v-model="ruleForm.isExcellented">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;margin: 10px 0;">
          <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;">确认</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { caseAnalyseScoreMain, submitCaseAnalyseScore } from '@/api/teacher/manage/casemanage'
export default {
  props: ['resourceCaseId', 'batchId'],
  data () {
    return {
      isShow: true,
      cases: {
        batchId: '',
        caserequest: '',
        casetitle: '',
        classId: '',
        headImgUrl: '',
        isScored: '',
        resourceCaseAnswerAnaylse: '',
        resourceCaseBgList: [],
        resourceCaseId: '',
        resourceLessonName: '',
        result: '',
        score: '',
        userId: '',
        userName: ''
      },
      ruleForm: {
        score: undefined,
        isExcellented: 0
      },
      rules: {
        score: [{ required: true, message: '请填写评分', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async caseAnalyseScoreMain () {
      const res = await caseAnalyseScoreMain({
        resourceCaseId: this.resourceCaseId,
        batchId: this.batchId
      })
      if (res.code === '200') {
        this.cases = res.data
        this.cases.result = JSON.parse(this.cases.result)[0].result
        this.ruleForm = {
          score: this.cases.score,
          isExcellented: this.cases.isExcellented
        }
      }
    },
    async submitCaseAnalyseScore (data) {
      const res = await submitCaseAnalyseScore(data)
      if (res.code === '200') {
        this.$message.success('操作成功')
        // 重新刷新活动列表
        this.$emit('handleEmit', 'confirm')
      } else {
        this.$message.error(res.message)
      }
    },
    submitForm (ruleForm) {
      this.$refs[ruleForm].validate(async valid => {
        if (valid) {
          const data = {
            resourceCaseId: this.resourceCaseId,
            userId: this.cases.userId,
            batchId: this.batchId,
            score: this.ruleForm.score,
            isExcellented: this.ruleForm.isExcellented
          }
          this.submitCaseAnalyseScore(data)
        } else {
          return false
        }
      })
    },
    closeBox () {
      this.$emit('handleEmit')
    }
  },
  mounted () {
    this.caseAnalyseScoreMain()
    this.caseAnalyseScoreMain()
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .comment-left {
    float: left;
    width: 550px;
    height: 600px;
    padding: 20px 10px;
    background: #fff;
    border: 1px solid #eee;
    overflow-y: scroll;
  }
  .comment-right {
    float: right;
    width: 400px;
    height: 600px;
    background: #fff;
    border: 1px solid #eee;
  }
</style>
